<div class="modal-header">
    <h4 class="modal-title">{{ "share_setting" | translate}}</h4>
</div>
<style>
    .share-to-modal.modal-body{
        padding:15px 40px;
    }
    .textarea{
        border-radius: 4px;
        margin-top: 10px;
        width: 100%;
        padding: 10px;
        height: 90px;
        border: 1px solid #d0d0d0;
    }
    .decorate-icon{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-block;
        background: #eee;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        cursor: pointer;
        color:white;
    }
    .decorate-icon a i{
        color:white;
    }
    .user-list, .invite-list{
        background: #eee;
        border:1px solid #d0d0d0;
        padding:10px;
    }
    .border-radius-style{
        border-radius: 4px;
    }
    .user-avatar{
        width:24px;
        height:24px;
        border-radius: 50%;
    }
    .user-table{
        width:100%;
    }
    .user-table tr{
        line-height: 30px;
    }
    .share-to-modal .select-options{
        padding:0;
        width: auto;
        border: none;
        box-shadow: none;
        display: inline-block;
        text-align: center;
        background: transparent;

        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button;
    }
    .select-options:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .select-option-actions{
        width:100px;
        line-height: 32px;
        padding: 0 10px;
    }
    .select-option-actions .select-options{
        height: 32px;
        color: white;
    }
    .pos-relative{
        position: relative;
    }
    .cus-point{
        cursor: pointer;
    }
    #popover-qrcode.popover{
        display: block;
    }
    .tiny-qrcode{
        height:40px;
        width:40px;
        line-height: 40px;
        display: inline-block;
        top: 12px;
        left: 7px;
    }
    *[ng-click]{
        cursor: pointer;
    }


    .loading-for-link{
        min-height: 200px;
        line-height: 200px;
        text-align: center;
    }
    .hide{
        display: none !important;
    }
    
    #share-new-email::-ms-clear , #the-link::-ms-clear {
        display:none;
    }

</style>
<div class="modal-body share-to-modal">

    <div class="loading-for-link text-center" ng-show="waitingForLink">
        <i class="fa fa-spinner fa-pulse"></i>
    </div>
    <div ng-show="!waitingForLink">
        <h5 class="pos-relative">
        <span type="button" class="dropdown-toggle cus-point" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span>(1)</span>
            <span>{{ "Enable Public Sharing" | translate }}</span>
            <!--<span>{{ everyonePermissionToActionMap[everyonePermission] }} </span>-->
            <span class="caret"></span>
        </span>
            <ul class="dropdown-menu">
                <li ng-repeat="(cmisPermission, permission) in everyonePermissionToActionMap" ng-hide="cmisPermission=='cmis:write'" ng-click="setEveryonePermission(cmisPermission)">
                    <a href="javascript:;"  ng-show="cmisPermission=='cmis:read'">
                        <span >{{ "Yes" | translate}}</span><i class="fa fa-check pull-right" style="margin-top: 4px;" ng-show="everyonePermission==cmisPermission"></i>
                    </a>
                    <a href="javascript:;" ng-show="cmisPermission=='smx:none'">
                        <span ng-show="cmisPermission=='smx:none'">{{ "No" | translate}}</span><i class="fa fa-check pull-right" style="margin-top: 4px;" ng-show="everyonePermission==cmisPermission"></i>
                    </a>

                </li>
            </ul>
            <!--<select class="form-control select-options" ng-model="selectedPermission" ng-options="permission for permission in permissionList"></select>-->
        </h5>
        <div class="input-group">
            <input id="the-link" type="text" tooltip-enable="tooltipIsOpen" tooltip-is-open="tooltipIsOpen" tooltip-class="copy-callback" uib-tooltip="{{ copy_status | translate}}" class="form-control" value="{{ fileLink }}">
              <span class="input-group-btn" ngclipboard-success="copyOnSuccess(e)" ngclipboard-error="copyOnError(e)" ngclipboard data-clipboard-target="#the-link" style="font-size: 14px">
                  <button class="btn btn-custom-primary">{{ 'copy' | translate }}</button>
              </span>
        </div>
        <div class="share-to pos-relative">
        <span class="decorate-icon" ng-hide="device == 'foxitReader' && (OS=='mac' || OS=='linux') && showSendEmail" style="background: #309a36;">
            <a class="mailTo" href="mailto:?body={{fileLink}}">
                <i class="fa fa-envelope-o" ng-click="shareTo('email',$event)"></i>
            </a>
        </span>
        <span class="decorate-icon" style="background: #3a5897;" ng-click="shareTo('facebook')" >
            <i class="fa fa-facebook-f"></i>
        </span>
        <span class="decorate-icon" ng-click="shareTo('google')" style="background: #2ca0d9;">
            <i class="fa fa-google-plus"></i>
        </span>
        <span class="decorate-icon" ng-click="shareTo('twitter')" style="background: #0083be;">
            <i class="fa fa-twitter"></i>
        </span>
        <span class="decorate-icon" ng-click="shareTo('linkedin')" style="background: #df564c;">
            <i class="fa fa-linkedin"></i>
        </span>
        <span class="decorate-icon" ng-click="shareTo('weibo')" >
            <i class="fa fa-weibo" style="color: #cd201f;"></i>
        </span>
            <span class="tiny-qrcode pos-relative" ng-mouseenter="showQrcode()" ng-mouseleave="hideQrcode()" id="qrElement" qrcode height="40" width="40" url="{{ fileLink }}"></span>
            <div id="popover-qrcode" ng-show="showBigQrcode" class="popover ng-scope ng-isolate-scope bottom" style="top: 124px;left: 246px;" ng-style="styles">
                <div class="arrow"></div>
                <div class="popover-inner">
                    <div class="popover-content ng-binding" ng-bind="content"></div>
                </div>
            </div>
        </div>
        <div>
            <h5>
                <span>(2)</span>
                <span>{{ 'who_has_access' | translate }}</span>
            </h5>
            <div class="user-list border-radius-style">
                <table class="user-table table-fixed">
                    <thead class="th-pd-0">
                    <tr>
                        <th width="6%"><img class="user-avatar" src="/img/ananymous-avatar.png" alt=""></th>

                        <th ng-if="everyonePermission!='smx:none'" width="50%">{{ 'anyone_has_link' | translate }}</th>
                        <th ng-if="everyonePermission!='smx:none'" class="text-center" width="35%">{{ permissionToActionMap[everyonePermission] }}</th>

                        <th ng-if="everyonePermission=='smx:none'" width="50%">{{ 'special_people' | translate }}</th>
                        <th ng-if="everyonePermission=='smx:none'" class="text-center" width="35%">{{ 'can_view' | translate }}</th>

                        <th width="5%"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="user in userList">
                        <td width="6%"><img class="user-avatar" ng-src="{{ user.userAvatar }}" alt=""></td>
                        <td width="50%">{{ user.userId }}</td>
                        <td width="35%" class="text-center">
                            <span ng-if="user.isOwner">{{ user.action }}</span>
                            <span uib-dropdown dropdown-append-to-body ng-if="!user.isOwner">
                                <span id="btn-append-to-to-body-{{ $index }}" class="cus-point" type="button" uib-dropdown-toggle>
                                    {{ user.action }}
                                    <!--<span class="caret"></span>-->
                                </span>
                                <!--<ul class="dropdown-menu" style="z-index: 1100;" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body-{{ $index }}">-->
                                    <!--<li ng-repeat="(cmisPermission,permission) in permissionToActionMap" ng-click="setUserAction(user,cmisPermission)">-->
                                        <!--<a href="javascript:;">{{ permissionToActionMap[cmisPermission] }}</a>-->
                                    <!--</li>-->
                                <!--</ul>-->
                            </span>
                            <!--<span class="pos-relative dropup" ng-if="!user.isOwner">-->
                                <!--<span type="button" class="dropdown-toggle cus-point" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
                                    <!--{{ user.action }} <span class="caret"></span>-->
                                <!--</span>-->
                                <!--<ul class="dropdown-menu">-->
                                    <!--<li ng-repeat="(cmisPermission,permission) in permissionToActionMap" ng-click="setUserAction(user,cmisPermission)">-->
                                        <!--<a href="javascript:;">{{ permissionToActionMap[cmisPermission] }}</a>-->
                                    <!--</li>-->
                                <!--</ul>-->
                            <!--</span>-->
                            <!--<select ng-if="!user.isOwner" class="form-control select-options" ng-model="user.action" ng-options="action for action in actionList"></select>-->
                            <!--<i ng-if="!user.isOwner" class="fa fa-caret-down"></i>-->
                        </td>
                        <td width="5%">
                            <span ng-if="!user.isOwner" ng-click="deleteEmail($index)"><i class="fa fa-times"></i></span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div>
            <h5>{{ 'invite_others' | translate }}</h5>
            <div class="invite-list border-radius-style">
                <div class="input-group">

                    <input id="share-new-email" type="text" class="form-control" ng-model="newEmail" ng-keyup="handleEnterKey($event)" placeholder="{{ 'enter_email_address' | translate }}">
                <span class="input-group-btn">
                    <span type="button" class="btn btn-custom-primary dropdown-toggle" style="border-top-right-radius: 0;border-bottom-right-radius: 0;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        {{ permissionToActionMap[selectedPermission] }}
                        <!--<span class="caret"></span>-->
                    </span>
                    <!--<ul class="dropdown-menu">-->
                        <!--<li ng-repeat="(cmisPermission,permission) in permissionToActionMap" ng-click="setGlobalAction(cmisPermission)">-->
                            <!--<a href="javascript:;">{{ permission }}</a>-->
                        <!--</li>-->
                    <!--</ul>-->
                    <span class="btn btn-default" ng-click="validateEmail()">
                        <i class="fa fa-plus"></i>
                    </span>


                </span>


                </div>
                <div ng-if="errMsg" class="text-danger err-msg">{{ errMsg }}</div>
                <div style="margin-top: 10px">
                    <textarea name="" class="textarea" ng-model="postMessage" ng-attr-placeholder="{{ 'email_personal_msg' | translate }}"></textarea>
                </div>
            </div>
        </div>
        <div>
            <h5>
                <label for="disable-download" class="cus-point">
                    <input id="disable-download" style="margin-right: 10px" type="checkbox" ng-click="changeDisableDownload()" ng-model="disableDownload"><span>{{ 'disable_download' | translate}}</span>
                </label>
            </h5>
        </div>
    </div>
</div>
<div class="modal-footer">
    <div class="alert alert-success alert-dismissable hide" ng-class="">
        <a href="javascript:;" class="close" ng-click="closeChangeTips()" >&times;</a>
        <p class="text-left">{{ 'changes_need_save' | translate }}</p>
    </div>

    <button ng-show="!waitingForLink" class="btn btn-custom-primary" type="button" ng-click="ok()" ng-disabled="isDisabled()">{{"save_changes" | translate }} <i ng-show="settingShareInfo" class="fa fa-spinner fa-pulse"></i></button>
    <button class="btn btn-default" type="button" ng-click="cancel()">{{"cancel" | translate }}</button>
</div>